<template>
  <t-dialog
    title="上传铺码Key"
    :visible="visible"
    :bodyScrollY="true"
    @onClickFooterButton="onClickFooterButton"
  >
    <el-form ref="form" label-position="top" :model="form" :rules="rules">
      <el-form-item v-if="type === 0" label="手写码Key：" prop="writecode">
        <el-upload
          class="mb-4"
          ref="writecode"
          accept=".tmx"
          action=""
          :show-file-list="false"
          :before-upload="checkWriteKeyFileType"
          :http-request="getHandwrittenCodeKey"
          :limit="1"
        >
          <el-button slot="trigger" size="small" type="primary">
            选择文件
          </el-button>
        </el-upload>
        <el-descriptions
          :style="{ 'margin-bottom': '18px' }"
          :labelStyle="{ 'text-align': 'center' }"
          :column="5"
          border
          direction="vertical"
          size="mini"
        >
          <el-descriptions-item
            label="SID"
            :contentStyle="{ 'text-align': 'center' }"
          >
            {{ form.writecode.sid }}
          </el-descriptions-item>
          <el-descriptions-item
            label="OID"
            :contentStyle="{ 'text-align': 'center' }"
          >
            {{ form.writecode.oid }}
          </el-descriptions-item>
          <el-descriptions-item
            label="BID"
            :contentStyle="{ 'text-align': 'center' }"
          >
            {{ form.writecode.bid }}
          </el-descriptions-item>
          <el-descriptions-item
            label="PageID"
            :contentStyle="{ width: '20%', 'text-align': 'center' }"
          >
            {{ form.writecode.minPid }}-{{ form.writecode.maxPid }}
          </el-descriptions-item>
          <el-descriptions-item
            label="有效期"
            :contentStyle="{ width: '30%', 'text-align': 'center' }"
          >
            {{ form.writecode.expiryDate }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-form-item v-if="type === 1" label="点读码Key" prop="readcode">
        <el-upload
          class="mb-4"
          ref="readcode"
          accept=".tmxe"
          action=""
          :show-file-list="false"
          :before-upload="checkReadKeyFileType"
          :http-request="getPointReadCodeKey"
          :limit="1"
        >
          <el-button slot="trigger" size="small" type="primary">
            选择文件
          </el-button>
        </el-upload>
        <el-descriptions
          :style="{ 'margin-bottom': '18px' }"
          :labelStyle="{ 'text-align': 'center' }"
          :column="6"
          border
          direction="vertical"
          size="mini"
        >
          <el-descriptions-item
            label="SA"
            :contentStyle="{ 'text-align': 'center' }"
          >
            {{ form.readcode.sa }}
          </el-descriptions-item>
          <el-descriptions-item
            label="SB"
            :contentStyle="{ 'text-align': 'center' }"
          >
            {{ form.readcode.sb }}
          </el-descriptions-item>
          <el-descriptions-item
            label="SC"
            :contentStyle="{ 'text-align': 'center' }"
          >
            {{ form.readcode.sc }}
          </el-descriptions-item>
          <el-descriptions-item
            label="SD"
            :contentStyle="{ 'text-align': 'center' }"
          >
            {{ form.readcode.sd }}
          </el-descriptions-item>
          <el-descriptions-item
            label="index"
            :contentStyle="{ width: '20%', 'text-align': 'center' }"
          >
            {{ form.readcode.minIndex }}-{{ form.readcode.maxIndex }}
          </el-descriptions-item>
          <el-descriptions-item
            label="有效期"
            :contentStyle="{ width: '30%', 'text-align': 'center' }"
          >
            {{ form.readcode.expiryDate }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form-item>
    </el-form>
  </t-dialog>
</template>

<script>
import TDialog from "./TDialog.vue";
import {
  loading1,
  loading,
  checkWriteCodeKey,
  checkReadCodeKey,
  checkWriteKeyFileType,
  checkReadKeyFileType,
  getWriteKey,
  getReadKey,
} from "@/common/utils";
export default {
  components: {
    TDialog,
  },
  data() {
    return {
      visible: false,
      type: 1, //$0-手写码 1-点读码
      form: {
        writecode: {
          value: "",
          sid: 0,
          oid: 0,
          bid: 0,
          minPid: 0,
          maxPid: 0,
          expiryDate: "0/0/0",
        },
        readcode: {
          value: "",
          sa: 0,
          sb: 0,
          sc: 0,
          sd: 0,
          minIndex: 0,
          maxIndex: 0,
          expiryDate: "0/0/0",
        },
      },
      rules: {
        writecode: [
          {
            required: true,
            validator: checkWriteCodeKey,
            trigger: "blur",
          },
        ],
        readcode: [
          {
            required: true,
            validator: checkReadCodeKey,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // $开启弹窗
    open(type) {
      this.visible = true;
      this.type = type;
    },
    // $验证手写码文件
    checkWriteKeyFileType: (file) => checkWriteKeyFileType(file),
    // $验证点读码文件
    checkReadKeyFileType: (file) => checkReadKeyFileType(file),
    // 读取手写码Key
    async getHandwrittenCodeKey(file) {
      this.form.writecode = await loading({
        text: "读取点读码Key文件中...",
        fn: async () => await getWriteKey(file),
      });
      this.$refs.form.validateField("writecode");
      this.$refs.writecode.clearFiles();
    },
    // 读取点读码Key
    async getPointReadCodeKey(file) {
      this.form.readcode = await loading({
        text: "读取点读码Key文件中...",
        fn: async () => await getReadKey(file),
      });
      this.$refs.form.validateField("readcode");
      this.$refs.readcode.clearFiles();
    },
    // 点击弹窗底部按钮
    onClickFooterButton(name) {
      switch (name) {
        case "确定":
          this.submit();
          break;

        default:
          this.visible = false;
          break;
      }
    },
    // $提交
    async submit() {
      const valid = await new Promise((resolve) =>
        this.$refs.form.validate(resolve)
      );
      if (!valid) return;
      loading1(async () => {
        const key = ["writecode", "readcode"][this.type];
        const putResult = await this.$attrs.putStoreValue(key, this.form[key]);
        console.log("设置Key", putResult);
        if (putResult.code !== 200) return;
        const getResult = await this.$attrs.getStoreValue(key);
        if (getResult.code !== 200) return;
        console.log("查询Key", getResult);
        this.visible = false;
        this.$emit("getCodeKey", key, getResult.data);
      }, "上传Key中...");
    },
  },
};
</script>